/* FunChat 图标样式 - 参考飞书风格 */

/* 基础图标样式 */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

/* 图标尺寸 */
.icon-xs {
  font-size: 12px;
}

.icon-sm {
  font-size: 14px;
}

.icon-md {
  font-size: 16px;
}

.icon-lg {
  font-size: 20px;
}

.icon-xl {
  font-size: 24px;
}

.icon-xxl {
  font-size: 32px;
}

/* 图标颜色 */
.icon-primary {
  color: var(--primary-color);
}

.icon-success {
  color: var(--success-color);
}

.icon-warning {
  color: var(--warning-color);
}

.icon-error {
  color: var(--error-color);
}

.icon-info {
  color: var(--info-color);
}

.icon-muted {
  color: var(--text-color-tertiary);
}

/* 图标旋转 */
.icon-spin {
  animation: icon-spin 2s infinite linear;
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 图标翻转 */
.icon-flip-horizontal {
  transform: scaleX(-1);
}

.icon-flip-vertical {
  transform: scaleY(-1);
}

/* 图标旋转角度 */
.icon-rotate-90 {
  transform: rotate(90deg);
}

.icon-rotate-180 {
  transform: rotate(180deg);
}

.icon-rotate-270 {
  transform: rotate(270deg);
}

/* 图标容器 */
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-circle);
  background-color: var(--background-color-secondary);
}

.icon-container-sm {
  width: 24px;
  height: 24px;
}

.icon-container-lg {
  width: 40px;
  height: 40px;
}

/* 图标按钮 */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-circle);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.icon-btn:hover {
  background-color: var(--background-color-tertiary);
}

.icon-btn:active {
  background-color: var(--background-color-quaternary);
}

.icon-btn-sm {
  width: 24px;
  height: 24px;
}

.icon-btn-lg {
  width: 40px;
  height: 40px;
}

/* 带文本的图标 */
.icon-text {
  display: inline-flex;
  align-items: center;
}

.icon-text .icon {
  margin-right: var(--spacing-mini);
}

.icon-text-right .icon {
  margin-left: var(--spacing-mini);
  margin-right: 0;
  order: 1;
}

/* 图标组 */
.icon-group {
  display: inline-flex;
  align-items: center;
}

.icon-group .icon-btn:not(:last-child) {
  margin-right: var(--spacing-mini);
}

/* 飞书风格的状态图标 */
.status-icon {
  position: relative;
  display: inline-block;
}

.status-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-color-tertiary);
  right: 0;
  bottom: 0;
  border: 1px solid var(--background-color-primary);
}

.status-icon.online::after {
  background-color: var(--success-color);
}

.status-icon.away::after {
  background-color: var(--warning-color);
}

.status-icon.busy::after {
  background-color: var(--error-color);
}

.status-icon.offline::after {
  background-color: var(--text-color-tertiary);
}

/* 飞书风格的通知徽章 */
.badge-icon {
  position: relative;
  display: inline-block;
}

.badge-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--error-color);
  right: 0;
  top: 0;
  border: 1px solid var(--background-color-primary);
}

.badge-icon.badge-number::after {
  content: attr(data-count);
  width: auto;
  height: auto;
  min-width: 16px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: white;
}

/* 飞书风格的功能图标 */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-base);
  background-color: rgba(var(--primary-color-rgb), 0.1);
  color: var(--primary-color);
}

.feature-icon-success {
  background-color: rgba(var(--success-color-rgb), 0.1);
  color: var(--success-color);
}

.feature-icon-warning {
  background-color: rgba(var(--warning-color-rgb), 0.1);
  color: var(--warning-color);
}

.feature-icon-error {
  background-color: rgba(var(--error-color-rgb), 0.1);
  color: var(--error-color);
}

.feature-icon-info {
  background-color: rgba(var(--info-color-rgb), 0.1);
  color: var(--info-color);
}

/* 飞书风格的菜单图标 */
.menu-icon {
  display: inline-flex;
  align-items: center;
  margin-right: var(--spacing-small);
  color: var(--text-color-secondary);
}

.menu-item:hover .menu-icon,
.menu-item.active .menu-icon {
  color: var(--primary-color);
}

/* 飞书风格的操作图标 */
.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius-circle);
  color: var(--text-color-secondary);
  transition: all 0.2s;
}

.action-icon:hover {
  background-color: var(--background-color-tertiary);
  color: var(--text-color-primary);
}

/* 飞书风格的文件类型图标 */
.file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-small);
  background-color: var(--background-color-secondary);
  color: var(--text-color-secondary);
  font-size: 20px;
}

.file-icon-doc {
  background-color: rgba(0, 102, 255, 0.1);
  color: #0066ff;
}

.file-icon-sheet {
  background-color: rgba(0, 180, 42, 0.1);
  color: #00b42a;
}

.file-icon-slide {
  background-color: rgba(255, 125, 0, 0.1);
  color: #ff7d00;
}

.file-icon-pdf {
  background-color: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

.file-icon-image {
  background-color: rgba(144, 90, 255, 0.1);
  color: #905aff;
}

.file-icon-video {
  background-color: rgba(250, 84, 28, 0.1);
  color: #fa541c;
}

.file-icon-audio {
  background-color: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.file-icon-zip {
  background-color: rgba(250, 173, 20, 0.1);
  color: #faad14;
}

/* 飞书风格的应用图标 */
.app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-base);
  background-color: var(--primary-color);
  color: white;
  font-size: 24px;
}

.app-icon-sm {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.app-icon-lg {
  width: 64px;
  height: 64px;
  font-size: 32px;
}